<template>
	<view class="add page bgff p16">


		<view class="fs16 py16 borb flex flexC">
			<text class="pr40">持卡人姓名</text>
			<input class="flex1" v-model="username"  type="text" placeholder="请输入持卡人姓名" placeholder-class="c8e fs14" />
		</view>
		<view class="fs16 py16 borb flex flexC">
			<text class="pr40">卡号</text>
			<input class="flex1" @input="inputBankCard" v-model="card_num" type="text" placeholder="请输入卡号(暂不支持借贷合一卡)"
				placeholder-class="c8e fs14" />
		</view>
		
		<view class="fs16 py16 borb flex flexC">
			<text class="pr40">预留手机号</text>
			<input class="flex1" v-model="phone" type="number" placeholder="请输入你的预留手机号"
				placeholder-class="c8e fs14" />
		</view>


		<button @click="addCard" hover-class="none" class="r40 btn bg41 mt40 fs16 ">提交</button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				card_num: '',
				phone: '',
				frontUrl: '/static/imgs/bg/bank_icon.png',
				frontPath: '',
				cardType: '借记卡',
				validDate: '',
				toIndex: -1

			};
		},
		onLoad(option) {


			this.username = option.name;

		},
		methods: {

			addCard() {

				if (this.card_num == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写储蓄卡号'
					})
					return;
				}
				if (this.phone == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写银行卡预留手机号'
					})
					return;
				}


				let param = {
					bankCard: this.card_num,
					bankPhone: this.phone,
				}
				let that = this;
				this.$api.addBank(param).then(res => {
					console.info(res);
					if (res.code == 1) {

						uni.showModal({
							title:"添加提示",
							content:"添加银行卡成功",
							showCancel:false,
							success(res) {
								uni.navigateBack({
									delta:1
								})
							}
						})

					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})


			},

			inputBankCard(e) {
				var newNum = e.target.value.replace(/\s/g, '').replace(/....(?!$)/g, '$& ');
				this.card_num = newNum;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.w20 {
		width: 40rpx;
		height: 40rpx;
	}
	.btn{
		line-height: 80rpx;
	}

	.w140 {
		width: 400rpx;
		height: 350rpx;
	}

	.masks {
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(66, 128, 239, .5);
		height: 390rpx;
		width: 100%;
	}

	.bg {
		background-color: #F5F8FF;
		position: relative;
	}

	
</style>
